<template>
  <div id="map"></div>
</template>

<script>
var map = new AMap.Map('map', {
  zoom: 11, //级别
  center: [116.397428, 39.90923] //中心点坐标
});
var marker = new AMap.Marker({
  position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  title: '北京',
  draggable: true
});

// 将创建的点标记添加到已有的地图实例：
marker.on('dragend', () => {
  console.log(marker.getPosition());
});
export default {
  name: '',
  data () {
    return {
      map: '',
      marker: '',
      latLngNum: {
        lng: '116.397428',
        lat: '39.90923'
      }
    };
  },
  props: {
    latLng: {
      type: Object,
      default: function () {
        return {
          lng: '116.397428',
          lat: '39.90923'
        }
      }
    }
  },
  watch: {
    latLng: {
      handler (newVal, oldVal) {
        console.log(newVal)
        this.latLngNum = newVal
        this.getLoction()
      },
      // immediate: true
    }
  },
  methods: {
    getLoction () {
      this.map = new AMap.Map('map', {
        zoom: 11, //级别
        // c {Q: 27.828829644876265, R: 113.13277901649474, lng: 113.132779, lat: 27.82883}
        center: [(Number(this.latLngNum.lng) || 1), (Number(this.latLngNum.lat) || 1)] //中心点坐标
      });

      this.marker = new AMap.Marker({
        position: new AMap.LngLat((Number(this.latLngNum.lng) || 1), (Number(this.latLngNum.lat) || 1)), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京',
        draggable: true
      });
      this.map.add(this.marker);
      // 将创建的点标记添加到已有的地图实例：
      this.marker.on('dragend', () => {
        console.log(this.marker.getPosition());
        this.$emit('listenEvent', this.marker.getPosition())
      });
    }
  },
  mounted () {
    this.latLngNum = this.latLng;
    this.getLoction()
  }
};
</script>

<style scoped>
#map {
    width: 100%;
    height: 100%;
    background: rgba(237, 237, 237, 1);
    opacity: 1;
}
</style>